<template>


	<view class="">
		<delVue :Visible="Visible" @isModal="isModal" :fiveText="fiveText" :oneText="oneText" @goStay="goStay"
			:twoText="twoText" :threeText="threeText" :fourText="fourText" />

		<delVue :Visible="isshow" @isModal="modal" @goStay="stay" :oneText="one" :twoText="two" :threeText="three"
			:fourText="four" />
		<view class="title">
			<view class="bg" :class="title != '' ? 'bg-color' : ''">

				<u-icon @click="goBack" size="36" name="arrow-left"></u-icon>
				<text>{{title}}</text>
				<view class="">
				</view>
			</view>
		</view>

		<view class="container">

			<view class="box">

				<view class="form-item">
					<view class="input-box">
						<text class="label">收货人</text>
						<input v-model="address.name" :class="{'has-value': address.name}" class="input ease"
							placeholder="请输入收货人姓名" />
					</view>

				</view>

				<view class="form-item">
					<view class="input-box">
						<text class="label">手机号码</text>

						<input v-model="address.mobile" :class="{'has-value': address.mobile}" class="input ease"
							type="number" placeholder="请输入手机号码" />
					</view>

				</view>

				<view class="form-item">
					<u-picker v-model="show" mode="region" :value="address.shippingAddress"
						@confirm="selectDistrict"></u-picker>
					<view class="input-box picker-box" @click="show = true">
						<view class="input-box">
							<text class="label">所在地区</text>
							<view class="ease" :class="{'has-value': address.shippingAddress!='选择省/市/区'}">
								<text>{{address.shippingAddress}}</text>
							</view>
						</view>
						<image class="right-img" :src="right" mode=""></image>
						
					</view>
				</view>

				<view class="form-item">
					<view class="input-box input-boxs">
						<text class="label">详细地址</text>
						<!-- <input v-model="address.detail" :class="{'has-value': address.detail}" class="input ease"
							placeholder="请输入详细地址" /> -->
						<textarea v-model="address.address" :class="{'has-value': address.address}" class="input ease"
							name="" id="" cols="20" rows="2" placeholder="请输入详细地址"
							style="height: 3em; line-height: 1.5em; resize: none;width: 480rpx;"></textarea>
					</view>

				</view>
			</view>


			<view class="box">
				<!-- 地址标签部分 -->
				<view class="form-item">
					<view class="input-box">
						<text class="label">地址标签</text>
						<view class="tag-container">
							<view class="tag" :class="{'tag-selected': address.labels === '家'}"
								@click="selectLabel('家')">
								家
							</view>
							<view class="tag" :class="{'tag-selected': address.labels === '公司'}"
								@click="selectLabel('公司')">
								公司
							</view>
							<view class="tag" :class="{'tag-selected': address.labels === '学校'}"
								@click="selectLabel('学校')">
								学校
							</view>
						</view>
					</view>
				</view>

				<!-- 默认地址开关选择器 -->
				<view class="form-item switch-box">
					<text class="switch-text">设置为默认地址</text>


					<view class="checkbox" :class="{'address-checkbox':address.isDefault}"
						@click.top="toggleItemSelection">
						<image v-if="address.isDefault" :src="bg" mode=""></image>

					</view>




				</view>
			</view>

			<view class="bot" v-if="title=='修改地址'">
				<view @click="saveAddress" class="submit-btn">保存地址</view>
			</view>
			<view class="bot footer" v-else>
				<view @click="delAddress" class="submit-btn btn-color btn-width">删除收货地址</view>
				<view @click="saveAddress" class="submit-btn  btn-width">保存并使用</view>
			</view>



		</view>
	</view>
</template>

<script>
	import config from "../../utils/config";
	import {
		addAddress,
		address,
		deleteAddress
	} from '../../service/api.js'
	import delVue from '../../components/del.vue'
	export default {
		data() {
			return {
				right: config.ossHost + "2025/01/09/ee1bcb20aa0b4ae5a14ad5dce09c3ba6.png",
				bg: config.ossHost + '2025/01/03/b7e97ec044a3427180a2b3d13ffb10b2.png',
				isshow: false,
				one: "再想想",
				two: "确定删除",
				three: "确定要删除该地址吗？",
				four: "删除提示",



				oneText: "保存并离开",
				twoText: "离开",
				fiveText: "取消",
				threeText: "返回将不保存当前信息，是否离开？",
				fourText: "",
				Visible: false,
				title: "修改地址",
				show: false,
				address: {
					shippingAddress: "选择省/市/区",
					name: '',
					mobile: '',
					//省
					province: '',
					//市
					city: "",
					//区
					area: "",

					address: '',
					labels: '', // 地址标签
					isDefault: 0, // 默认地址
				},
				formError: false, // 表单是否有错误
			};
		},
		onLoad(options) {
			if (options.title) {
				this.title = options.title
			}

			this.address = JSON.parse(options.item);


			this.address.isDefault = this.address.isDefault;
		},
		components: {

			delVue
		},
		methods: {
			toggleItemSelection() {
				if (this.address.isDefault) {
					this.address.isDefault = 0
				} else {
					this.address.isDefault = 1
				}

			},
			onchange(e) {

				if (e) {
					this.address.isDefault = 1;
				} else {
					this.address.isDefault = 0;
				}

			},
			goBack() {
				this.Visible = true;
			},


			delAddress() {
				this.isshow = true;

			},
			modal(item) {
				this.isshow = item;
			},
			async stay(item) {
				this.isshow = item;
				let res = await deleteAddress({
					id: this.address.id
				})
				if (res.code == 200) {
					uni.showToast({
						title: '删除成功',
						icon: 'success'
					});
					uni.navigateBack({
						delta: 1,
					});
				}

			},
			isModal(item) {
				this.Visible = item;
			},
			goStay(item) {
				this.Visible = item;
				uni.navigateBack({
					delta: 1,
				});
			},



			//选中地区
			selectDistrict(item) {

				this.address.province = item.province.value;
				this.address.city = item.city.value;
				this.address.area = item.area.value;
				this.address.shippingAddress = item.province.label + ' ' + item.city.label + " " + item.area.label
			},
			selectLabel(label) {

				this.address.labels = label;
			},
			async saveAddress() {
				// 校验必填项
				this.formError = false;

				// 检查必填项是否填写
				if (!this.address.name || !this.address.mobile || this.address.shippingAddress.length === 0 || !this
					.address
					.address) {
					this.formError = true;
					uni.showToast({
						title: '请填写完整信息',
						icon: 'none'
					});
					return;
				}

				// 手机号格式验证
				const mobileReg = /^1[3-9]\d{9}$/; // 匹配中国大陆手机号码
				if (!mobileReg.test(this.address.mobile)) {
					this.formError = true;
					uni.showToast({
						title: '请输入有效的手机号码',
						icon: 'none'
					});
					return;
				}

				let res = await addAddress(this.address);
				if (res.code == 200) {
					// 提交成功
					uni.showToast({
						title: '地址修改成功',
						icon: 'success'
					});
					uni.navigateBack({
						delta: 1,
					});

				}




			}
		}
	};
</script>

<style lang="scss" scoped>
	.box {
		padding: 24rpx;
		margin: 0 24rpx;
		background: #fff;
		border-radius: 16rpx;
		margin-top: 24rpx;
	}

	.container {

		// padding: 20rpx;
		.form-item {
			border-bottom: 1rpx solid #E6E6E6;
			padding-bottom: 20rpx;

			.switch-text {
				font-size: 24rpx;
				font-weight: bold;
				color: #4D4D4D;
			}

			.input-box {
				display: flex;
				align-items: center;
			}

			.input-boxs {
				align-items: end;
			}

			margin-bottom: 24rpx;
		}

		.form-item:last-child {
			margin-bottom: 0;
			border-bottom: 0;
		}

		.switch-box {
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		.label {
			display: inline-block;
			width: 100rpx;
			font-size: 24rpx;
			font-weight: bold;
			margin-right: 48rpx;
			color: #4D4D4D;
		}

		.input {
			color: #B3B3B3;
			font-size: 24rpx;


		}
	}



	.tag-container {
		display: flex;

	}

	.tag {
		margin-right: 32rpx;
		padding: 3rpx 16rpx;
		background-color: #f0f0f0;
		border-radius: 20rpx;
		font-size: 24rpx;
		/* color: #333; */
		cursor: pointer;
		color: #808080;
	}

	.tag-selected {
		background-color: #CCA566;
		color: white;
	}

	.submit-btn {
		width: 100%;

		height: 80rpx;
		background: #CCA566;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		line-height: 80rpx;
		text-align: center;
		color: white;
		color: #fff;
		font-size: 32rpx;

		font-size: 18px;
		border-radius: 4px;
		cursor: pointer;
	}

	.btn-width {
		width: 339rpx;
	}

	.btn-color {
		border: 2rpx solid #CCA566;

		background: #fff;
		color: #CCA566;
	}

	.submit-btn:active {
		background-color: #45a049;
	}

	.picker-box {
		display: flex;
		align-items: center;
		justify-content: space-between;

		.ease {
			font-size: 24rpx;
			color: #B3B3B3;
		}
	}

	.bot {
		position: fixed;
		width: 702rpx;
		height: 120rpx;
		padding: 24rpx;
		background: #fff;
		bottom: 0;
	}

	.footer {
		display: flex;
		justify-content: space-between;
	}

	.has-value {
		font-weight: bold;
		font-size: 24rpx;
		color: #1A1A1A !important;
	}

	.bg {
		width: 100%;
		height: 120rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 24rpx;
		padding-top: 65rpx;


		.title-img {
			width: 100rpx;
		}

		text {
			display: inline-block;

			color: #1a1a1a;
			font-size: 32rpx;
			font-weight: bold;
		}

		view {
			width: 100rpx;
		}
	}

	.title {
		background: #fff;
	}

	.checkbox {
		width: 32rpx;
		height: 32rpx;
		/* background: #808080; */
		border-radius: 50%;
		display: flex;
		align-items: center;
		box-sizing: border-box;
		justify-content: center;
		border: 1rpx solid #808080;

		image {
			width: 32rpx;
			height: 32rpx;
		}
	}

	.address-checkbox {
		border: none;
	}
</style>